<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <!-- <h1>无缝衔接版</h1> -->
    <div class="swiper-wrapper">
        <!-- 轮播图容器 -->
        <div class="wrapper-container">
            <!-- 图片-->
            <div class="banner">
                <ul>
                    <li>
                        <a href="#"><img src="./icon/images/1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="./icon/images/2.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="./icon/images/3.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="./icon/images/4.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href=""><img src="./icon/images/5.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href=""><img src="./icon/images/1.jpg" alt=""></a>
                    </li>
                </ul>
            </div>
            <!-- 导航点 -->
            <div class="point">
                <ol>
                    <li class="active"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ol>
            </div>
            <!-- 按钮 -->
            <div class="btn-left"><span class="icon"></span></div>
            <div class="btn-right"><span class="icon"></span></div>
        </div>
    </div>


    <script src="./js/animateV3.0.0.js"></script>
    <script>
        var container = document.querySelector(".wrapper-container");
        var banner = document.querySelector(".banner");
        var ulElement = document.querySelector("ul");
        var points = document.querySelectorAll(".point ol li");
        var btnLeft = document.querySelector(".btn-left");
        var btnRight = document.querySelector("btn-right");
        // 记录两个索引值，如果不用做导航点的话就一个 
        var index = 0 ;
        var square = 0 ;
        // 记录宽度ul的上一级宽度，注意使用的是offsetWidth
        var width = banner.offsetWidth;
        // console.log(width);
        // 设置一个定时器1，变量设置为null
        var dingshiqi = null ;

        // 设置导航点
        var setPoint = function (key) {
            for(var i = 0 ; i < points.length ; i ++) {
                points[i].className = "";
            }
            points[key].className = "active";
        }
        // 测试
        // setPoint(1);

        var autoPlay = function () {
            index ++;
            if(index > 5) {
                index = 1 ;
                ulElement.style["marginLeft"] = "0px";
            }
            animate(ulElement,"marginLeft" , -(index*width));
            square ++ ;
            square = square > 4 ? 0 : square;
            setPoint(square);
        }
        dingshiqi = setInterval(function () {autoPlay() ; } , 2000)

        container.addEventListener("mouseenter" , function() {
            clearInterval(dingshiqi);
        })

        container.addEventListener("mouseleave" , function () {
            clearInterval(dingshiqi);
            dingshiqi = setInterval(function() {autoPlay () ; }, 2000)
        }) 

        for(var j = 0 ; j < points.length ; j ++) {
            points[j].count = j ;
            points[j].onclick = function() {
                index = this.count ;
                square = this.count ;
                aniamte(ulElement , "marginLeft" , -(index * width));
                setPoint(square);
            }
        }
    </script>
</body>

</html>